<template>
  <div class="app-container">
    <div class="studentSituationCourseDetails_info">
      <div class="studentSituationCourseDetails_info_li">
        <div class="studentSituationCourseDetails_info_li_title">课后作业</div>
        <div class="studentSituationCourseDetails_info_li_content">
          <div class="studentSituationCourseDetails_info_li_content_tltle">
            <div class="studentSituationCourseDetails_info_li_content_tltle_left">
              <img src="../studentSituationDetails/signIn.png" alt="">
            </div>
            <div class="studentSituationCourseDetails_info_li_content_tltle_right">
              <div class="studentSituationCourseDetails_info_li_content_tltle_right_title">已按时提交作业</div>
              <div class="studentSituationCourseDetails_info_li_content_tltle_right_main">提交时间：2024-02-28 15:30</div>
            </div>
          </div>
          <div class="studentSituationCourseDetails_info_li_content_center">
            <div class="studentSituationCourseDetails_info_li_content_center_title">作业内容：</div>
            <div class="studentSituationCourseDetails_info_li_content_center_li">1. 完成体育理论知识测试 </div>
            <div class="studentSituationCourseDetails_info_li_content_center_li">2. 提交运动计划表  </div>
            <div class="studentSituationCourseDetails_info_li_content_center_li">3. 记录一周运动数据  </div>
          </div>
          <div class="studentSituationCourseDetails_info_li_content_center">
            <div class="studentSituationCourseDetails_info_li_content_center_title">作业内容：</div>
            <div class="studentSituationCourseDetails_info_li_content_center_li1">
              <div class="flie_left">
                <div class="flie_left_img">
                  <img src="./pdf.png" alt="">
                </div>
                <div class="flie_left_name">体育理论测试.pdf</div>
              </div>
              <div class="flie_right">
                <el-button type="text" icon="el-icon-download">下载</el-button>
              </div>
            </div>
            <div class="studentSituationCourseDetails_info_li_content_center_li1">
              <div class="flie_left">
                <div class="flie_left_img">
                  <img src="./xlsx.png" alt="">
                </div>
                <div class="flie_left_name">体育理论测试.pdf</div>
              </div>
              <div class="flie_right">
                <el-button type="text" icon="el-icon-download">下载</el-button>
              </div>
            </div>
            <div class="studentSituationCourseDetails_info_li_content_center_li1">
              <div class="flie_left">
                <div class="flie_left_img">
                  <img src="./dock.png" alt="">
                </div>
                <div class="flie_left_name">体育理论测试.pdf</div>
              </div>
              <div class="flie_right">
                <el-button type="text" icon="el-icon-download">下载</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="studentSituationCourseDetails_info_li">
        <div class="studentSituationCourseDetails_info_li_title">满意度问卷</div>
        <div class="studentSituationCourseDetails_info_li_content">
          <div class="studentSituationCourseDetails_info_li_content_center" style="border-top: 1px solid #E5E7EB">
            <div class="studentSituationCourseDetails_info_li_content_center_title">问卷内容</div>
            <div class="studentSituationCourseDetails_info_li_content_center_li1" style="flex-direction: column">
              <div class="questionnaire_name">1. 您对本次课程的整体满意度如何？</div>
              <div class="questionnaire_content">是的，教师讲解通俗易懂，举例生动形象，便于理解和掌握。</div>
            </div>
            <div class="studentSituationCourseDetails_info_li_content_center_li1" style="flex-direction: column">
              <div class="questionnaire_name">1. 您对本次课程的整体满意度如何？</div>
              <div class="questionnaire_content">
                <el-rate
                  v-model="value"
                  :texts="['极差', '失望', '一般', '满意', '非常满意']"
                  show-text>
                </el-rate>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { addTeacher } from "@/api/classai/teacher";
import {addTraining, getTraining, updateTraining} from "@/api/classai/training";

export default {
  name: "StudentSituationCourseDetails",
  dicts: ['px_type'],
  data() {
    return {
      value:1,
      // 表单参数
      form: {

      },
      loading:false,
      // 表单校验
      rules: {
      }
    };
  },
  created(){
    this.getList()
  },
  methods: {
    getList(){
      // let id = this.$route.query.id
      // getTraining(id).then(response => {
      //   this.form = response.data;
      // });
    },
    handleDetail(row){

    },

  }
};
</script>
<style lang="scss" scoped>
.app-container{
  background: #f3f4f6;
  flex: 1;
  padding: 24px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
}
.studentSituationCourseDetails_info {
  flex: 1;
  overflow: auto;
  border-radius: 6px;
  background: #fff;
  padding-bottom: 24px;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  flex-direction: column;
  .studentSituationCourseDetails_info_li{
    padding: 32px 24px 0 24px;
    box-sizing: border-box;
    .studentSituationCourseDetails_info_li_title{
      //padding-top: 24px;
      box-sizing: border-box;
      font-size: 18px;
      font-weight: 600;
      line-height: 28px;
      color: #111827;
      margin-bottom: 16px;
    }
    .studentSituationCourseDetails_info_li_content{
      padding: 24px;
      box-sizing: border-box;
      border-radius: 8px;
      background: #F9FAFB;
      .studentSituationCourseDetails_info_li_content_tltle{
        display: flex;
        align-items: center;
        padding-bottom: 16px;
        box-sizing: border-box;
        border-bottom: 1px solid #E5E7EB;
        .studentSituationCourseDetails_info_li_content_tltle_left{
          img{
            height: 20px;
          }
        }
        .studentSituationCourseDetails_info_li_content_tltle_right{
          margin-left: 12px;
          .studentSituationCourseDetails_info_li_content_tltle_right_main{
            font-size: 16px;
            line-height: 24px;
            color: #111827;
          }
          .studentSituationCourseDetails_info_li_content_tltle_right_main{
            font-size: 14px;
            line-height: 20px;
            color: #4B5563;
          }
        }
      }
      .studentSituationCourseDetails_info_li_content_center{
        padding-top: 16px;
        box-sizing: border-box;
        .studentSituationCourseDetails_info_li_content_center_title{
          font-size: 16px;
          font-weight: 500;
          line-height: 24px;
          color: #111827;
          margin-bottom: 8px;
        }
        .studentSituationCourseDetails_info_li_content_center_li{
          height: 24px;
          font-size: 16px;
          line-height: 24px;
          color: #374151;
        }
        .studentSituationCourseDetails_info_li_content_center_li1{
          border-radius: 8px;
          background: #FFFFFF;
          padding: 12px;
          box-sizing: border-box;
          border: 1px solid #E5E7EB;
          margin-bottom: 12px;
          display: flex;
          justify-content: space-between;
          .flie_left{
            display: flex;
            align-items: center;
            .flie_left_img{
              margin-right: 12px;
              img{
                height: 16px;
              }
            }
            .flie_left_name{
              font-size: 16px;
              line-height: 24px;
              color: #374151;
            }
          }
          .questionnaire_name{
            font-size: 16px;
            line-height: 24px;
            color: #111827;
            margin-bottom: 12px;
          }
          .questionnaire_content{
            font-size: 16px;
            line-height: 24px;
            color: #374151;
          }
        }
      }
    }
  }

}

</style>
